<script>
	import Vue from 'vue'
	// #ifdef H5
	import indexApi from '@/api/index.js'
	import 'leaflet/dist/leaflet.css'
	// #endif
	export default {
		onLaunch: function () {
			uni.getSystemInfo({
				success: function (e) {
					// #ifndef MP
					Vue.prototype.StatusBar = e.statusBarHeight
					if (e.platform == 'android') {
						Vue.prototype.CustomBar = e.statusBarHeight + 50
					} else {
						Vue.prototype.CustomBar = e.statusBarHeight + 45
					}
					// #endif

					// #ifdef MP-WEIXIN
					Vue.prototype.StatusBar = e.statusBarHeight
					let custom = wx.getMenuButtonBoundingClientRect()
					Vue.prototype.Custom = custom
					Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight + 4
					// #endif

					// #ifdef MP-ALIPAY
					Vue.prototype.StatusBar = e.statusBarHeight
					Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight
					// #endif
				}
			})

			// // 默认取图例
			// this.$store.dispatch('getLegends')
			// // 默认取泉州县市
			// this.$store.dispatch('getCounty')

			// uni.getLocation({
			// 	type: 'wgs84',
			// 	success: async (res) => {
			// 		// 获取最近的站点数据
			// 		uni.setStorageSync('latlon', res)
			// 	}
			// })
		},
		onLoad(options) {},
		onShow: function () {},
		onHide: function () {
			console.log('App Hide')
		},
		mounted() {
			// #ifdef H5
			// 监听网络状态变化
			uni.onNetworkStatusChange(function (res) {
				// console.info(`res:`, res)
				if (!navigator.onLine) {
					uni.showToast({
						icon: 'error',
						title: '网络已断开'
					})
				} else {
					// uni.showToast({
					// 	icon: 'success',
					// 	title: '网络已连接'
					// })
					// console.log('网络已连接')
					// 在这里执行网络正常时的逻辑
				}
			})
			// #endif
			// h5 获取url参数
			// #ifdef H5
			this.getVersionEv() // 获取版本
			Vue.prototype.UserInfoData = uni.getStorageSync('getUserInfoData')
			Vue.prototype.DeptTreeData = uni.getStorageSync('getDeptTreeData')
			Vue.prototype.UserInfo = uni.getStorageSync('userInfo')

			const obj = this.getUrlParams(window.location.href)

			Vue.prototype.$cid = obj.cid || ''

			if (obj && obj.CustomBar) {
				Vue.prototype.CustomBarWeb = obj.CustomBar
				Vue.prototype.StatusBarWeb = obj.StatusBar
			} else {
				Vue.prototype.CustomBarWeb = Vue.prototype.CustomBar //80
				Vue.prototype.StatusBarWeb = Vue.prototype.StatusBar //30
			}

			if (obj && obj.location) {
				let pos = obj.location.split(',')
				console.info(`h5接受的经纬度参数:`, pos)
				uni.setStorageSync('latlon', {
					latitude: pos[0],
					longitude: pos[1]
				})
			}
			// #endif

			// #ifdef APP-PLUS
			// plus.push.getClientInfoAsync((info) => {
			// 	let cid = info['clientid']
			// 	console.info(`cid:`, cid)
			// })

			// plus.screen.lockOrientation('portrait-primary')
			// #endif
		},
		methods: {
			getUrlParams(url) {
				const params = {}
				// 获取问号后面的部分，即查询字符串
				const queryString = url.split('?')[1]
				if (queryString) {
					// 分割查询字符串为数组
					const queryParams = queryString.split('&')
					// 遍历数组，将每个参数分别解析出来存入对象中
					queryParams.forEach((param) => {
						const [key, value] = param.split('=')
						params[key] = decodeURIComponent(value)
					})
				}
				return params
			},
			// 版本更新
			async getVersionEv() {
				let resp = await indexApi.getVersion({ t: new Date().getTime() })
				setTimeout(() => {
					// 更新
					uni.webView.postMessage({
						data: {
							message: 'update_version',
							data: resp
						}
					})
				}, 1500)
			}
		}
	}
</script>

<style lang="scss">
	@import 'colorui/use.css';
	@import 'uview-ui/index.scss';

	// #ifdef H5
	@import 'colorui/main.css';
	@import 'colorui/icon.css';
	@import 'pdfh5/css/pdfh5.css';
	@import 'leaflet.markercluster/dist/MarkerCluster.css';
	@import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
	// @import 'leaflet/dist/leaflet.css';
	// #endif;

	// #ifdef APP-PLUS
	@import './assets/fonts/icomoon/style.css';
	@import './static/customicons.css';
	@import './wfc.css';
	@import url('/static/font/iconfont.css');
	// #endif
	// @import '@/static/font/iconfont.css';
	.fontBorder {
		color: #000 !important;
		font-weight: 500;
		text-shadow: 0 2rpx #fff, 2rpx 0 #fff, -2rpx 0 #fff, 0 -2rpx #fff;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	.ceshiBtn {
		position: fixed;
		z-index: 99999;
		top: 30%;
		right: 30%;
		width: 80rpx;
		height: 80rpx;
		background: red;
	}
	.app-box {
		overflow: hidden;
	}
	.svg-icon {
		width: 45rpx;
		height: 45rpx;
		display: inline-block;
		/* 通过设置 color 来改变 SVG 的颜色/fill */
		fill: currentColor;
		/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
      normalize.css 中也包含这行 */
		overflow: hidden;
	}
	.icon-type {
		background: #fefffe;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(19, 83, 156, 0.24);
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		overflow: hidden;
		padding: 10rpx 0;
		font-size: 26rpx;
		// width: 90rpx;
		color: #607589;
	}
	.icon-type .text {
		color: #000;
	}
	.icon-type-ac {
		color: #fff;
		background: #007aff !important;
	}
	.icon-type-ac .text {
		color: #fff;
	}
	.icon-type-box {
		background: #fefffe;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(19, 83, 156, 0.24);
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		overflow: hidden;
		height: fit-content;
		font-size: 26rpx;
		// width: 90rpx;
		color: #007aff;
	}
	.icon-type-box .icon-type {
		background: none;
		box-shadow: none;
		border-radius: 0;
	}
	.icon-type-box .line {
		border-top: 2rpx solid rgba(0, 0, 0, 0.13);
		width: 60%;
		margin: 3rpx auto;
	}
	.borUp {
		border-top: 2rpx solid rgba(96, 117, 137, 0.121);
	}
	.uni-system-preview-image {
		.nav-btn-back {
			display: none !important;
		}
	}
</style>

<style>
	.ty-icon-rote {
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 400 !important;
	}
	.ty-icon-rote .ty-icon-rote-img {
		width: 100%;
		height: 100%;
	}
	.ty-icon-rote .ty-icon-rote-img .iconfont {
		text-shadow: 1px 0 3px #fff, 0 1px 3px #fff, -1px 0 3px #fff, 0 -1px 3px #fff;
	}
	.ty-icon-rote .ni {
		animation: spinNi 3s linear infinite;
	}
	.ty-icon-rote .shun {
		animation: spinShun 3s linear infinite;
	}
	@keyframes spinNi {
		from {
			transform: rotate(360deg);
		}
		to {
			transform: rotate(0);
		}
	}
	@keyframes spinShun {
		from {
			transform: rotate(360deg);
		}
		to {
			transform: rotate(0);
		}
	}
	.tyClass-style {
		width: 1px;
		height: 1px;
		border-radius: 15px;
	}
	.tyClass-style .leaflet-popup-content {
		padding: 0;
		margin: 0;
	}
	.tyClass-style .leaflet-popup-content-wrapper {
		background: none;
		box-shadow: none;
	}
	.tyClass-style .leaflet-popup-tip-container {
		display: none;
		width: 0;
		height: 0;
		top: 20px;
		transform: rotate(180deg);
	}
	.tyClass-style .leaflet-popup-tip-container .leaflet-popup-tip {
		background: rgba(57, 142, 223, 0.6);
		box-shadow: none;
	}
	.tyClass-style .leaflet-popup-close-button {
		top: 60px;
		left: 195px;
		color: #fff;
	}
	.tyClass-style .ty-popup-style {
		position: absolute;
		top: 35px;
		left: 50%;
		transform: translateX(-50%);
		width: 240px;
		border-radius: 15px;
	}
	.tyClass-style .ty-popup-style .ty-popup-title {
		width: 100%;
		height: 35px;
		display: flex;
		color: #fff;
		background: rgba(57, 142, 223, 0.6);
		border-radius: 7px;
		font-weight: bold;
		letter-spacing: 2px;
		line-height: 35px;
		white-space: nowrap;
		font-size: 16px;
		padding: 0 10px;
	}
	.tyClass-style .ty-popup-style .ty-popup-body {
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		padding: 10px 20px;
		background: rgba(255, 255, 255, 0.62);
		filter: drop-shadow(0px 2px 10px rgba(0, 0, 0, 0.25));
	}
	.tyClass-style .ty-popup-style .ty-popup-body .ty-popup-label {
		color: #037fd5;
		letter-spacing: 2px;
	}
	.tyClass-style .ty-popup-style .ty-popup-body span {
		letter-spacing: 2px;
	}
	.tyClass-style .ty-popup-style .ty-popup-body div {
		margin: 6px 0;
	}
	.tyClass-style .ty-popup-style::before {
		content: '';
		position: absolute;
		left: 50%;
		top: -12px;
		transform: translateX(-50%);
		width: 0;
		height: 0;
		border-bottom: 15px solid rgba(57, 142, 223, 0.6);
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
	}
	.leaflet-interactive[type='ty-circle-wind'] {
		pointer-events: none !important;
	}
	.cilr-type {
		z-index: 300 !important;
	}
	.foreastItem-ty {
		pointer-events: none;
	}
	.foreastItem-ty .foreastItem-ty-font {
		font-size: 14px;
		white-space: nowrap;
		text-indent: 10px;
		color: white;
		transform: translateX(20px) translateY(-10px);
		text-shadow: 0.5px 0.5px 0.5px #120a0a, -0.5px 0.5px 0.5px #120a0a, 0.5px -0.5px 0.5px #120a0a,
			-0.5px -0.5px 0.5px #120a0a;
	}
	.a-taifeng222:before {
		content: '\e648';
	}
	.tyNameClass {
		min-width: 90px;
		white-space: nowrap;
		flex-shrink: 0;
		padding: 5px 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(255, 125, 1, 0.86);
		filter: drop-shadow(0px 2px 10px rgba(0, 0, 0, 0.1));
		color: #fff;
		transform: translateX(25px) translateY(-10px);
		border-radius: 5px;
	}
	.tyNameClass .sjxClassName {
		position: absolute;
		top: 8px;
		left: -10px;
		margin-left: -1px;
		border-width: 6px;
		border-style: solid;
	}
	.cejuClass {
		width: 1px;
		height: 1px;
		border-radius: 15px;
	}
	.cejuClass .leaflet-popup-content {
		padding: 0;
		margin: 0;
	}
	.cejuClass .leaflet-popup-content-wrapper {
		background: none;
		box-shadow: none;
	}
	.cejuClass .leaflet-popup-tip-container {
		width: 0;
		height: 0;
		top: 20px;
	}
	.cejuClass .leaflet-popup-close-button {
		top: -50px !important;
		left: 85px;
		color: #fff !important;
	}
	.cejuClass .cejuClass-popup {
		position: absolute;
		top: -55px;
		left: 50%;
		transform: translateX(-50%);
		padding: 15px 0;
		padding-left: 15px;
		width: 250px;
		border-radius: 15px;
		background: rgba(57, 142, 223, 0.6);
		color: #fff;
		white-space: nowrap;
	}
	.cejuClass .cejuClass-popup::before {
		content: '';
		position: absolute;
		left: 50%;
		top: 60px;
		transform: translateX(-50%);
		width: 0;
		height: 0;
		border-top: 20px solid rgba(57, 142, 223, 0.6);
		border-left: 15px solid transparent;
		border-right: 15px solid transparent;
	}
	.foreastItem-ty-show {
		display: none;
	}
</style>
